<template>
    <div class="goodsBuy">
        <NavBack/>
        <div class="goods-cover">
            <van-swipe class="my-swipe"
                       :autoplay="3000"
                       indicator-color="white"
            >
                <van-swipe-item
                        v-for="(item,index) in goodsInfo.sku"
                        :key="index">
                    <van-image
                            width="100%"
                            height="100%"
                            fit="cover"
                            lazy-load
                            :src="item.thumb_url"
                    />
                </van-swipe-item>
            </van-swipe>

            <div class="time">
                <van-image
                        width="100%"
                        height="100%"
                        fit="cover"
                        lazy-load
                        src="https://commimg.pddpic.com/oms_img_ng/2020-11-16/e1ffb685-e254-4a32-9c91-13d65a06ea01.jpeg?imageView2/2/w/1300/q/80"
                />
            </div>
        </div>
        <div class="price-count">
            <p>
                <span class="symbol">￥</span>
                <span class="price">{{goodsInfo.max_normal_price/100}}</span>
                <span class="end">起</span>
            </p>
            <p><span class="count">已拼{{goodsInfo.sales}}</span></p>
        </div>
        <div class="title">
            {{goodsInfo.goods_name}}
        </div>
        <p class="advantage">
            <span>退货包运费</span>
            <span>急速退款</span>
            <span>满15返1</span>
        </p>

        <div class="goodsComment">
            <p>
                <span>商品评论(10万+)</span>
            </p>
            <p>
                <span>查看全部</span>
            </p>
        </div>

        <div class="goods-advantage">
                <span>
                    正品({{Math.round(Math.random()*1000)}})
                </span>
            <span>
                    物美价廉({{goodsInfo.sales }})
                </span>
            <span>
                    质量很好({{goodsInfo.quantity | numFormat}})
                </span>
        </div>

        <ul>
            <li>
                <div class="user">
                    <van-image
                            width="25"
                            height="25"
                            round
                            :src="'https://bing.ioliu.cn/v1/rand?w=100&h=100&time='+Math.random()*999"
                    />
                    <span>一切随缘</span>
                </div>
                <p><span class="message">
                        牙刷己收到，好用，物美价廉，物流态度很好，用起方便，值得购买
                    </span></p>
            </li>
            <li>
                <div class="user">
                    <van-image
                            width="25"
                            height="25"
                            round
                            :src="'https://bing.ioliu.cn/v1/rand?w=100&h=100&time='+Math.random()*999"
                    />
                    <span>一切随缘</span>
                </div>
                <p><span class="message">
                        牙刷己收到，好用，物美价廉，物流态度很好，用起方便，值得购买
                    </span></p>
            </li>
        </ul>

        <div class="goods-detail">
            <p>商品详情</p>
            <ul class="present">
                <li v-for="(item,index) in goodsInfo.property" :key="index">
                    <span>{{item.key}}</span>
                    <span>{{item.values.join('')}}</span>
                </li>

            </ul>
        </div>

        <ul class="goods-pic">
            <li v-for="(item,index) in goodsInfo.gallery" :key="index" >
            <van-image
                    width="100%"
                    height="100%"
                    fit="cover"
                    :src="item.url"
            />
            </li>
        </ul>

        <div class="bottom">
            <div class="tu-biao">
                <p>
                    <van-icon name="like-o"/>
                </p>
                <p><span>收藏</span></p>
            </div>
            <div class="tu-biao">
                <p>
                    <van-icon name="chat-o"/>
                </p>
                <p><span>客服</span></p>
            </div>
            <div class="buy">
                <p class="price">
                    <span class="symbol">￥</span>
                    <span class="price">{{goodsInfo.max_normal_price/100}}</span>
                </p>
                <p><span @click="handelShow">单独购买</span></p>
            </div>
            <div class="order">
                <p class="price">
                    <span class="symbol">￥</span>
                    <span class="price">{{goodsInfo.max_group_price/100}}</span>
                </p>
                <p><span @click="handelShow">发起拼单</span></p>
            </div>
        </div>
        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods_info"
                :goods-id="goods_id"
                :hide-stock="sku.hide_stock"
                :quota="quota"
                :quota-used="quota_used"
                :initial-sku="initialSku"
                reset-stepper-on-hide
                reset-selected-sku-on-hide
                disable-stepper-input
                :close-on-click-overlay="closeOnClickOverlay"
                :custom-sku-validator="customSkuValidator"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
        />
    </div>
</template>

<script>
    import  mixins from '../common/mixins'
    export default {
        name: "GoodsBuy",
        mixins:[mixins],
        data() {
            return {
                goodsInfo:{},
                show: false,
                showCustom: false,
                showStepper: false,
                showSoldout: false,
                closeOnClickOverlay: true,
                initialSku:{ //默认选中
                    s1: '30349',
                    s2: '1193',
                    selectedNum: 3
                },
                customSkuValidator: () => '请选择xxx!',
                sku: {
                    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                    tree: [
                        {
                            k: '颜色',
                            k_id: '1',
                            v: [
                                {
                                    id: '30349',
                                    name: '天蓝色',
                                    imgUrl:
                                        'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
                                },
                                {
                                    id: '1215',
                                    name: '白色'
                                }
                            ],
                            k_s: 's1',
                            count: 2
                        },
                        {
                            k: '尺寸',
                            k_id: '2',
                            v: [
                                {
                                    id: '1193',
                                    name: '1'
                                },
                                {
                                    id: '1194',
                                    name: '2'
                                }
                            ],
                            k_s: 's2',
                            count: 2
                        }
                    ],
                    // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
                    list: [
                        {
                            id: 2259,
                            price: 120, //价格
                            discount: 122,
                            s1: '1215',
                            s2: '1193',
                            s3: '0',
                            s4: '0',
                            s5: '0',
                            stock_num: 20, //库存
                            goods_id: 946755
                        },
                        {
                            id: 2260,
                            price: 110,
                            discount: 112,
                            s1: '1215',
                            s2: '1194',
                            s3: '0',
                            s4: '0',
                            s5: '0',
                            stock_num: 2, //库存
                            goods_id: 946755
                        },
                        {
                            id: 2257,
                            price: 130,
                            discount: 132,
                            s1: '30349',
                            s2: '1193',
                            s3: '0',
                            s4: '0',
                            s5: '0',
                            stock_num: 40, //库存
                            goods_id: 946755
                        },
                        {
                            id: 2258,
                            price: 100,
                            discount: 100,
                            s1: '30349',
                            s2: '1194',
                            s3: '0',
                            s4: '0',
                            s5: '0',
                            stock_num: 50, //库存
                            goods_id: 946755
                        }
                    ],
                    price: '5.00',
                    stock_num: 227, // 商品总库存
                    none_sku: false,  // 是否无规格商品
                    hide_stock: false  // 是否隐藏剩余库存
                },
                goods_id: '946755',
                quota: 3, //限购数量
                quota_used: 0,  //已经购买过的数量
                goods_info: {
                    title: '测试商品A',
                    picture:
                        'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
                },
                initialSku:{
                    s1: "0001",
                    s2: "1001",
                    selectedNum: 3
                }
            }
        },
        created() {
            this.getGoodsInfo()

        },
        methods: {
            handelShow() {
                this.show = !this.show
                console.log("购买！")
            },
            onBuyClicked(skuData){
                console.log(skuData)
            },
            onAddCartClicked(skuData){
                console.log(skuData)
            },
            async getGoodsInfo(){
                const {goods_id} =this.$route.query
                console.log(goods_id)
                const result=await this.axios.post('/goodsInfo',{
                    goods_id
                })
                // console.log(result.data)
                this.goodsInfo=result.data
                console.log(this.goodsInfo)
            }
        }

    }
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .goodsBuy {
        padding-bottom: 100px;
        .goods-cover {
            width: 750px;
            height: 825px;
            position: relative;

            .time {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 93px;
            }
        }

        .price-count {
            display: flex;
            justify-content: space-between;
            color: #FF5706;
            margin-top: 10px;

            .symbol {
                font-size: 18px;
            }

            .price {
                font-size: 50px;
            }

            .end {
                font-size: 24px;
                color: #58595b;
            }

            .count {
                color: #58595b;
                font-size: 24px;
            }
        }

        .title {
            font-weight: bold;
            font-size: 30px;
            margin-top: 10px;
        }

        .advantage {
            color: #58595b;
            font-size: 30px;
            margin-top: 10px;

            span {
                padding-right: 20px;
            }
        }

        .goodsComment {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 30px;
            color: #111;
        }

        .goods-advantage {
            display: flex;
            color: #58595b;
            font-size: 28px;
            margin-top: 10px;

            span {
                display: block;
                float: left;
                margin-right: 20px;
                background-color: #fceae9;
                padding: 20px 20px;
                align-content: center;
                border-radius: 10px;
            }
        }

        .user {
            margin-top: 10px;
            display: flex;
            align-items: center;

            span {
                padding-left: 10px;
                font-size: 28px;
            }
        }

        .message {
            color: #58595b;
            font-size: 28px;
        }

        .goods-detail {
            margin-top: 10px;
            font-size: 30px;
            color: #151516;

            p {
                margin-left: 10px;
            }

            .present {
                margin-top: 10px;
                background-color: rgb(244, 244, 244);

                li {
                    padding: 20px 20px;
                }

                span {
                    padding-right: 50px;
                    color: #9c9c9c;
                }
            }
        }

        .goods-pic {
            width: 100%;
        }

        .bottom {
            width: 100%;
            height: 105px;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            z-index: 99;
            align-items: center;
            background: #fff;

            .tu-biao {
                width: 16%;
                /*margin-right:20px;*/
                font-size: 40px;
                padding-top: 20px;
            }

            .buy {
                width: 35%;
                padding-left: 30px;
                background-color: #f3aba7;
                color: white;

                .price {
                    font-size: 34px;

                    .symbol {
                        padding-right: 3px;
                    }
                }

                span {
                    font-size: 40px;
                }
            }

            .order {
                width: 35%;
                padding-left: 30px;
                background-color: #e02e24;
                align-items: center;
                color: white;

                .price {
                    font-size: 34px;

                    .symbol {
                        padding-right: 3px;
                    }
                }

                span {
                    font-size: 40px;
                }
            }


        }
    }


</style>